<template>

    <div class="v-list" v-loading="loading" element-loading-text="加载中">

        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="title">
                    应急信息列表
                </span>

            </div>
            <!-- 搜索 -->
            <div class="form-search">
                <el-form @submit.prevent.stop :inline="true" size="mini">
                    <el-form-item label="标题">

                        <el-input v-model="search.title"></el-input>

                    </el-form-item> <el-form-item label="分类">

                        <el-select v-model="search.kind"><el-option label="请选择" value=""></el-option>
                            <el-option v-for="m in emergencykindList" :value="m.id" :label="m.name"></el-option>
                        </el-select>

                    </el-form-item> <el-form-item label="添加人">

                        <el-input v-model="search.admin"></el-input>

                    </el-form-item> <el-form-item label="点击量">

                        <el-input type="text" style="width:80px;" v-model="search.clicks_start"></el-input>
                        -
                        <el-input type="text" style="width:80px;" v-model="search.clicks_end"></el-input>

                    </el-form-item> <el-form-item>
                        <el-button type="primary" @click="searchSubmit" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>


            <el-table border :data="list" style="width: 100%" highlight-current-row>

                <el-table-column type="index" label="#"></el-table-column> <!-- 序号 -->

                <el-table-column label="标题">
                    <template slot-scope="{row}">
                        {{ row.title }} </template>
                </el-table-column>
                <el-table-column label="分类" width="80">
                    <template slot-scope="{row}">
                        <e-select-view module="emergencykind" :value="row.kind" select="id" show="name"></e-select-view>
                    </template>
                </el-table-column>
                <el-table-column label="图片" width="100">
                    <template slot-scope="{row}">
                        <e-img :src="row.photo" style="max-width:120px" /> </template>
                </el-table-column>
                <el-table-column label="添加人" width="80">
                    <template slot-scope="{row}">
                        {{ row.admin }} </template>
                </el-table-column>
                <el-table-column label="点击量" width="80">
                    <template slot-scope="{row}">
                        {{ row.clicks }} </template>
                </el-table-column>




                <el-table-column label="操作">
                    <template slot-scope="{row}">
                        <el-button-group>

                            <el-tooltip content="详情" placement="top">
                                <el-button @click="$goto({ path: '/admin/emergencydetail', query: { id: row.id } })"
                                    icon="el-icon-info" type="info" size="mini"></el-button>
                            </el-tooltip>
                            <el-tooltip content="编辑" placement="top">
                                <el-button icon="el-icon-edit"
                                    @click="$goto({ path: '/admin/emergencyupdt', query: { id: row.id } })"
                                    type="warning" size="mini"></el-button>
                            </el-tooltip>
                            <el-tooltip content="删除" placement="top">
                                <el-button icon="el-icon-delete" type="danger" size="mini" @click="deleteItem(row)">

                                </el-button>
                            </el-tooltip>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>



            <div class="e-pages" style="margin-top: 10px;text-align: center">
                <el-pagination @current-change="loadList" :current-page="page" :page-size="pagesize"
                    @size-change="sizeChange" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
                </el-pagination>
            </div>

        </el-card>
    </div>
</template>
<style type="text/scss" scoped lang="scss"></style>
<script>
import api from '@/api';
import { remove } from '@/utils/utils';
import { extend } from '@/utils/extend';
import objectDiff from 'objectdiff';


/**
 * 后台列表页面
 */
export default {
    data() {
        return {

            loading: false,
            list: [],
            search: {

                title: '',

                kind: '',

                admin: '',

                clicks_start: '',
                clicks_end: '',


                content: '',

            },
            total: {},
            page: 1, // 当前页
            pagesize: 10, // 页大小
            totalCount: 0, // 总行数

            emergencykindList: [],

        }
    },
    watch: {},
    computed: {},
    methods: {
        searchSubmit() {
            this.setSearchParamsToCookie();
            this.loadList(1);
        },

        sizeChange(e) {
            this.pagesize = e;
            this.setSearchParamsToCookie();
            this.loadList(1);
        },

        loadList(page) {
            // 防止重新点加载列表
            if (this.loading) return;
            this.loading = true;
            this.page = page;
            // 从 Cookie 中获取筛选条件
            var filter = this.getSearchParamsFromCookie();
            console.log('LoadList - Filter from Cookie:', filter); // 打印筛选条件
            filter.page = page.toString();
            filter.pagesize = this.pagesize.toString();

            this.$post(api.emergency.listadmin, filter).then(res => {
                this.loading = false;
                if (res.code == api.code.OK) {
                    extend(this, res.data);
                } else {
                    this.$message.error(res.msg);
                }
            }).catch(err => {
                this.loading = false;
                this.$message.error(err.message);
            });
        },
        // 删除某行方法
        deleteItem(row) {
            this.$confirm('确定删除数据？', '提示', { // 弹出 确认框提示是否要删除
                type: 'warning'
            }).then(() => {// 确定操作

                this.loading = true; // 滚动条
                this.$post(api.emergency.delete, {// 提交后台
                    id: row.id
                }).then(res => {
                    this.loading = false;
                    if (res.code != api.code.OK) {
                        this.$message.error(res.msg);
                    } else {
                        remove(this.list, row);
                    }
                }).catch(err => { // 访问网络错误
                    this.loading = false;
                    this.$message.error(err.message)
                })
            }).catch(() => {
                // 取消操作
            })
        },
        setSearchParamsToCookie() {
            const searchParams = {
            number: this.search.number,
            name: this.search.name,
            month: this.search.month,
            page: this.page,
            pagesize: this.pagesize,
            title: this.search.title,
            kind: this.search.kind,
            admin: this.search.admin,
            clicks_start: this.search.clicks_start,
            clicks_end: this.search.clicks_end
            };
            this.setCookie('searchParams', JSON.stringify(searchParams), 1); // 1表示过期时间1天
            console.log('SetSearchParamsToCookie - Search Params:', searchParams); // 打印存储的筛选条件
        },

        getSearchParamsFromCookie() {
            const cookieValue = this.getCookie('searchParams');
            return cookieValue ? JSON.parse(cookieValue) : {};
        },

        setCookie(name, value, days) {
            var expires = "";
            if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
            }
            document.cookie = name + "=" + (value || "") + expires + "; path=/";
        },

        getCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }

    },
    // beforeRouteUpdate(to, form, next) {
    //     extend(this.search, to.query)
    //     this.loadList(1);
    //     next();
    // },
    created() {
        const searchParams = this.getSearchParamsFromCookie();
        console.log('Created - Search Params from Cookie:', searchParams); // 打印从 Cookie 中读取的筛选条件
        extend(this.search, searchParams);
        this.page = searchParams.page ? Math.floor(searchParams.page) : 1;
        this.pagesize = searchParams.pagesize ? Math.floor(searchParams.pagesize) : 10;
        this.loadList(this.page);
    },
    mounted() {
        this.setSearchParamsToCookie();
    },
    destroyed() {
    }
}
</script>
